<script setup>
//引入依赖
import Map from 'ol/Map';
import TileLayer from 'ol/layer/Tile';
import {XYZ} from 'ol/source';
import View from 'ol/View';
import { ref ,onMounted} from "vue";
import { transform } from "ol/proj";

const map = ref(null);

const initMap = () => {
  const center = transform([114.5, 38.0], 'EPSG:4326', 'EPSG:3857');
  map.value = new Map({
    target:'map',
    layers: [
      new TileLayer({
        title: '天地图路网',
        crossOrigin: 'anonymous',
        wrapX: false,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69',
        }),
        /*isGroup: true,
                      name: '天地图路网'*/
      }),

      new TileLayer({
        title: '天地图文字标注',
        attributions: '天地图的属性描述',
        wrapX: false,
        source: new XYZ({
          url: 'https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=d30d1c34260f2edc72b25f9985e2fd69',
        }),
      }),
    ],
    view: new View({
      center: center,
      zoom: 11,
    }),
  })
}

onMounted(initMap)
</script>

<template>
  <!--地图挂载dom-->
  <div id="map">
  </div>
</template>

<style scoped>
#map {
  width: 100%;
  height: 100%;
}
</style>